const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack')

module.exports = {
  mode: "development",
  devtool: 'cheap-module-eval-source-map',
  devServer: {
    // eslint 报错显示在浏览器
    overlay: true,
    contentBase: './dist',
    open: true,
    hot: true,
    hotOnly: true,
    proxy: {
      '/react/api': {
        target: 'http://www.dell-lee.com',
        secure: false,
        // historyApiFallback: {
        //     rewrites: [//访问任何路径都展示index.html页面
        //         { from: /\.*/, to: '/index.html' },
        //     ]
        // },
        // 一般配置这个就可以了
        historyApiFallback: true,
        // bypass: function (req, res, proxyOptions) {
        //     // 请求是 html 的情况，直接返回这个 html ,不会走代理
        //     if (req.headers.accept.indexOf('html') !== -1) {
        //         console.log('Skipping proxy for browser request.');
        //         return '/index.html';
        //     }
        // },
        pathRewrite: {
          'header.json': 'demo.json'
        },
        changeOrigin: true,
        headers: {
          host: 'www.dell-lee.com',
          cookie: 'asvafhgs'
        }
      }
    },
    contentBase: 'dist',
    port: 8081
  },
  // 入口文件
  entry: {
    main: ['webpack-hot-middleware/client?noInfo=true&reload=true', './src/index.js']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        // use: [
        //     'babel-loader',
        //     {
        //         loader: 'eslint-loader',
        //         options: {
        //             fix: true
        //         }
        //     }
        // ]
        // use: [
        //     {
        //         loader: 'eslint-loader',
        //         options: {
        //             fix: true
        //         },
        //         // 强制执行
        //         force: 'pre'
        //     },
        //     'babel-loader'
        // ]
        loader: 'babel-loader'
      },
      {
        test: /\.(jpg|png|gif)$/,
        use: {
          loader: 'url-loader',
          options: {
            name: '[name]_[hash].[ext]',
            outputPath: 'images/',
            limit: 2048
          }
        }
      }, {
        test: /\.scss$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 2
            }
          },
          'sass-loader',
          'postcss-loader'
        ],
      }, {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          'postcss-loader'
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({ template: 'src/index.html' }),
    new CleanWebpackPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ],
  // 出口文件
  output: {
    // 打包之后的文件名
    publicPath: '/',
    filename: '[name].js',
    // 打包之后文件的存放路径
    path: path.resolve(__dirname, 'dist')
  }
}